<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对联广告</title>
    <script src="../JQuery基础/js/jquery-1.12.4.js"></script>
    <style>
        * {
            padding-bottom: 2000px;
        }
        .-left {
            position: fixed;
            left: 0;
            top: 400px;
            display: none;
        }
        .-right {
            position: fixed;
            right: 0;
            top: 400px;
            display: none;
        }

    </style>
</head>
<body>

<img src="./img/left_ad.png" alt="" class="-left">
<img src="./img/right_ad.png" alt="" class="-right">
</body>

<script type="text/javascript" >
    // 1.监听网页的滚动
    $(function () {
        $(window).scroll(function () {
            // 1.1获取网页滚动的偏移位
            var offset = $("html,body").scrollTop();
            // 1.2判断网页是否滚动到了指定的位置
            if(offset >= 500){
                // 1.3显示广告
                $("img").show(1000);
            }else{
                // 1.4隐藏广告
                $("img").hide(1000);
            }
        })
    })

</script>
</html>